<!-- 展商推荐 -->
<template>
  <div class="recommend" v-if="list && list.length > 0">
    <div class="wCen">
      <div class="homeTitle">
        <span class="homeTitle_l white">{{ $t("exhibitor-t1") }}</span>
        <span class="homeTitle_r white" v-if="localeCn">EXHIBITORS</span>
      </div>
    </div>
    <div class="wCen wCen2">
      <ul class="list">
        <div class="swiper-containerPar">
          <section class="swiper-container swiper-logo">
            <article class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in listArr" :key="index">
                <div class="imgBox hand" v-for="(itemJ, idxJ) in item" :key="idxJ" @click="go2ExhibitorDetail(itemJ)">
                  <img :src="itemJ.logo" class="img" v-if="itemJ.logo" />
                  <img :src="defaultLogo" alt="" class="img" v-else />
                </div>
              </div>
            </article>
            <!-- <div class="swiper-pagination"></div> -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </section>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/exhibitor";
import util from "@/libs/util";
export default {
  computed: {
    slidesPerView() {
      if (this.isMobile) {
        return 3;
      } else {
        return 5;
      }
    },
    slidesPerColumn() {
      if (this.isMobile) {
        return 4;
      } else {
        return 2;
      }
    },
    spaceBetween() {
      if (this.isMobile) {
        return 10;
      } else {
        return 48;
      }
    },
    listArr() {
      const num_per = this.slidesPerView * this.slidesPerColumn;
      return util.sliceIntoChunks(this.list, num_per);
    },
  },
  data() {
    return {
      list: [],
      form: {
        pageNum: 1,
        pageSize: 50, //5屏
        isHome: 1,
        orderByColumn: "t1.homeSortOrder",
        isAsc: "asc",
      },
      swiperLogo: null,
    };
  },
  mounted() {
    this.getListFun();
  },
  methods: {
    initSwiper() {
      this.$nextTick(() => {
        if (this.swiperLogo && this.swiperLogo.destroy) {
          this.swiperLogo.destroy(true, true);
        }
        this.swiperLogo = new Swiper(".swiper-logo", {
          spaceBetween: 0,
          autoplay: 5000,
          paginationClickable: true,
          //   pagination: ".swiper-logo .swiper-pagination",
          nextButton: ".swiper-logo .swiper-button-next",
          prevButton: ".swiper-logo .swiper-button-prev",
          autoplayDisableOnInteraction: false, //手动播放后继续自动播放
        });
      });
    },
    getListFun() {
      this.invoke(getList, this.form).then((res) => {
        if (res && res.code == 200) {
          this.list = res.rows.map((item) => {
            return {
              id: item.id,
              logo: item.logo,
            };
          });
          this.initSwiper();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  $plr: 100px;
  $zoomBig: calc(1560px + 2 * #{$plr});
  background: #e35191 url("@/assets/images/bg-exhibitor.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 130px 0 120px;

  .homeTitle {
    margin-bottom: 120px;
  }

  .swiper-slide {
    $w: 275px;
    $h: 195px;
    $g: 46px;
    $column: 5;
    display: flex;
    flex-wrap: wrap;

    .imgBox {
      height: $h;
      width: $w;
      flex: 0 0 $w;
      margin-bottom: $g;
	  border:1px solid #e7649d;
	  	background-color: #ffffff;
      &:not(:nth-child(#{$column}n)) {
        margin-right: $g;
      }

      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .img {
      max-width: 100%;
      max-height: 100%;
      transition: transform 0.2s linear;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
  .wCen2 {
    width: $zoomBig;
  }
  .swiper-containerPar {
    position: relative;
    padding: 0 $plr;
    overflow: hidden;
  }
  .swiper-container {
    position: static;
    .swiper-button-next,
    .swiper-button-prev {
      $wh: 42px;
      width: $wh;
      height: $wh;
      margin-top: -$wh;
      background-size: 100% 100%;
      background-image: url("@/assets/images/icon_next-white.png");
    }
    .swiper-button-next {
      right: 0px;
    }
    .swiper-button-prev {
      transform: rotate(180deg);
      left: 0px;
    }
  }
  @media (min-width: 1501px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    $zoomBig: scale(calc(1560px + 2 * #{$plr}));
    padding: scale(100px) 0 scale(100px);
    .homeTitle {
      margin-bottom: scale(120px);
    }
    .swiper-slide {
      $w: scale(275px);
      $h: scale(195px);
      $g: scale(36px);
      $column: 5;
      .imgBox {
        height: $h;
        width: $w;
        flex: 0 0 $w;
        margin-bottom: $g;

        &:not(:nth-child(#{$column}n)) {
          margin-right: $g;
        }
      }
    }
    .wCen2 {
      width: $zoomBig;
    }
    .swiper-containerPar {
      position: relative;
      padding: 0 $plr;
      overflow: hidden;
    }
    .swiper-container {
      .swiper-button-next,
      .swiper-button-prev {
        $wh: scale(42px);
        width: $wh;
        height: $wh;
        margin-top: -$wh;
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1500px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1500});
    }
    $zoomBig: scale(calc(1560px + 2 * #{$plr}));
    padding: scale(100px) 0 scale(100px);
    .homeTitle {
      margin-bottom: scale(120px);
    }
    .swiper-slide {
      $w: scale(275px);
      $h: scale(195px);
      $g: scale(20px);
      $column: 5;
      .imgBox {
        height: $h;
        width: $w;
        flex: 0 0 $w;
        margin-bottom: $g;

        &:not(:nth-child(#{$column}n)) {
          margin-right: $g;
        }
      }
    }
    .wCen2 {
      width: $zoomBig;
    }
    .swiper-containerPar {
      position: relative;
      padding: 0 $plr;
      overflow: hidden;
    }
    .swiper-container {
      .swiper-button-next,
      .swiper-button-prev {
        $wh: scale(42px);
        width: $wh;
        height: $wh;
        margin-top: -$wh;
      }
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    $zoomBig: scale(calc(1500px + 2 * #{$plr}));
    padding: scale(100px) 0 scale(100px);
    .homeTitle {
      margin-bottom: scale(120px);
    }
    .swiper-slide {
      $sc: 0.96;
      $w: scale(275px * $sc);
      $h: scale(195px * $sc);
      $g: scale(28px);
      $column: 5;
      .imgBox {
        height: $h;
        width: $w;
        flex: 0 0 $w;
        margin-bottom: $g;

        &:not(:nth-child(#{$column}n)) {
          margin-right: $g;
        }
      }
    }
    .wCen2 {
      width: $zoomBig;
    }
    .swiper-containerPar {
      position: relative;
      padding: 0 $plr;
      overflow: hidden;
    }
    .swiper-container {
      .swiper-button-next,
      .swiper-button-prev {
        $wh: scale(42px);
        width: $wh;
        height: $wh;
        margin-top: -$wh;
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    $zoomBig: scale(calc(1560px + 2 * #{$plr}));
   padding: scale(100px) 0 scale(100px);
    .homeTitle {
      margin-bottom: scale(120px);
    }
    .swiper-slide {
      $sc: 0.96;
      $w: scale(275px * $sc);
      $h: scale(195px * $sc);
      $g: scale(30px);
      $column: 5;
      .imgBox {
        height: $h;
        width: $w;
        flex: 0 0 $w;
        margin-bottom: $g;

        &:not(:nth-child(#{$column}n)) {
          margin-right: $g;
        }
      }
    }
    .wCen2 {
      width: $zoomBig;
    }
    .swiper-containerPar {
      position: relative;
      padding: 0 $plr;
      overflow: hidden;
    }
    .swiper-container {
      .swiper-button-next,
      .swiper-button-prev {
        $wh: scale(42px);
        width: $wh;
        height: $wh;
        margin-top: -$wh;
      }
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding: 40px 0;
    .homeTitle {
      margin-bottom: 40px;
    }
    .swiper-slide {
      $sc: 0.78;
      $w: scale(275px * $sc);
      $h: scale(195px * $sc);
      $g: scale(30px);
      $column: 3;
      .imgBox {
        height: $h;
        width: $w;
        flex: 0 0 $w;
        margin-bottom: $g;
        &:nth-child(#{$column}n) {
          margin-right: 0;
        }
        &:not(:nth-child(#{$column}n)) {
          margin-right: $g;
        }
      }
    }
    .wCen2 {
      width: 90%;
      padding: 0 5%;
      text-align: center;
    }
    .swiper-containerPar {
      position: relative;
      padding: 0 10px;
      overflow: visible;
    }
    .swiper-container {
      .swiper-button-next,
      .swiper-button-prev {
        $wh: 20px;
        width: $wh;
        height: $wh;
        margin-top: -$wh;
      }
      .swiper-button-next{
        right: -20px;
      }
      .swiper-button-prev{
        left:-20px
      }
    }
  }
}
</style>
